<!--
 * @Description: 排行榜
 * @Author: py
 * @Date: 2024-11-12
-->
<script setup lang="ts" name="ranking-board">
import AreaTable from './area-table.vue'
import ProjectTable from './project-table.vue'

const oDay = day()
const todayLabel = oDay.format('YYYY-MM-DD')
const yesterdayLabel = oDay.subtract(1, 'day').format('YYYY-MM-DD')
const yesterdayRangeArr = [yesterdayLabel, yesterdayLabel]
const last7DateLabel = oDay.subtract(7, 'day').format('YYYY-MM-DD')
const last7RangeArr = [last7DateLabel, todayLabel]
const last30DateLabel = oDay.subtract(30, 'day').format('YYYY-MM-DD')
const last30RangeArr = [last30DateLabel, todayLabel]

const rangeList = ref([
    {
        name: '昨天',
        type: 'yesterday',
        value: yesterdayRangeArr,
    },
    {
        name: '近7天',
        type: 'lastWeek',
        value: last7RangeArr,
    },
    {
        name: '近30天',
        type: 'lastMonth',
        value: last30RangeArr,
    },
])
const curRangeType = ref('lastMonth')

const dateSelection = ref(last30RangeArr)

const oDateRange = computed(() => {
    const [startTime, endTime] = dateSelection.value
    return {
        endTime,
        startTime,
    }
})
// provide('dateRange', oDateRange)

function clickPresetRange(oItem) {
    curRangeType.value = oItem.type
    dateSelection.value = oItem.value
}
function handleRangeChange() {
    curRangeType.value = ''
}

// const minTimestamp = oDay.subtract(7, 'month').subtract(1, 'day').valueOf()
const minTimestamp = day('2024-04-01').valueOf()
const maxTimestamp = oDay.valueOf()
function disabledDate(time) {
    const aTimestamp = time.getTime()
    return aTimestamp > maxTimestamp || aTimestamp < minTimestamp
}

const activeTabName = ref('project')
</script>

<template>
    <div class="page-container">
        <div class="row-date">
            <span class="label-date">统计日期</span>

            <div class="btn-group">
                <div v-for="(item, index) of rangeList"
                     :key="index"
                     class="btn-item"
                     :class="item.type === curRangeType ? 'active' : ''"
                     @click="clickPresetRange(item)"
                >
                    {{ item.name }}
                </div>
            </div>

            <div class="picker-box">
                <el-date-picker v-model="dateSelection"
                                unlink-panels
                                type="daterange"
                                value-format="YYYY-MM-DD"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :clearable="false"
                                :editable="false"
                                :disabled-date="disabledDate"
                                @change="handleRangeChange"
                />
            </div>
        </div>

        <div class="content-wrapper">
            <el-tabs v-model="activeTabName">
                <el-tab-pane label="项目榜"
                             name="project"
                >
                    <ProjectTable :date-range="oDateRange" />
                </el-tab-pane>

                <el-tab-pane label="地区榜"
                             name="area"
                >
                    <AreaTable :date-range="oDateRange" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<style lang="less" scoped>
.page-container {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.row-date {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;

    .label-date {
        font-size: 14px;
        line-height: 20px;
        color: #1d2129;
        margin-right: 8px;
    }

    .btn-group {
        display: inline-flex;
        column-gap: 8px;
        margin-right: 20px;

        .btn-item {
            padding: 4px 12px;
            border-radius: 2px;
            background-color: #f2f3f5;
            border: 1px solid #f2f3f5;
            color: #4e5969;
            font-size: 14px;
            line-height: 20px;
            cursor: pointer;

            &.active {
                background-color: #fff0f0;
                border: 1px solid #da0004;
                color: #da0004;
            }
        }
    }

    .picker-box {
        width: 400px;
    }
}

.content-wrapper {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;

    :deep(.el-tabs__header) {
        margin: 0;
    }
}
</style>
